<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Interactive SVG Coordinate System</title>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="Interactive%20SVG%20Coordinate%20System_files/styles.css">
</head>
<body>
	<div>
		倍率:<input id="my_value" value="2" style="width:100px;border:1px gray solid;" /><br />
		<button onclick="big()" style="width:100px;background-color:green;">放大</button><br />
		<button onclick="small()" style="width:100px;background-color:green;">缩小</button>
	</div>
	<header>
		Demo for article: <a href="http://sarasoueidan.com/blog/svg-coordinate-systems">SVG Coordinate Systems &amp; Transformations (Part 1) – The viewport, <code>viewBox</code>, &amp; <code>preserveAspectRatio</code></a>
	</header>
	
	<div class="wrapper clearfix">
		<div class="controls column">
			<fieldset>
				<legend>viewBox</legend>
				<div class="input">
					<label for="#min-x">&lt;min-x&gt;</label> <input type="text" id="min-x" class="viewbox-option" value="0">
				</div>
				<div class="input">
					<label for="#min-y">&lt;min-y&gt;</label> <input type="text" id="min-y" class="viewbox-option" value="0">
				</div>
				<label for="#viewBox-width">&lt;width&gt;</label>
				<input type="range" id="viewbox-width" class="viewbox-option" min="0.0001" value="500" max="99999" step="1"><output for="viewbox-width">500</output>
				<label for="#viewbox-height">&lt;height&gt;</label>
				<input type="range" id="viewbox-height" class="viewbox-option" min="0.0001" value="500" max="99999" step="1" data-current-value="500"><output for="viewbox-height">500</output>
			</fieldset>
			<fieldset>
				<legend>preserveAspectRatio</legend>
				<label for="alignment">&lt;align&gt;</label>
				<select class="preserveAspectRatio-options" id="alignment">
					<option value="none">None</option>
					<option value="xMinYMin">xMinYMin</option>
					<option value="xMinYMid">xMinYMid</option>
					<option value="xMinYMax">xMinYMax</option>
					<option value="xMidYMin">xMidYMin</option>
					<option value="xMidYMid">xMidYMid</option>
					<option value="xMidYMax">xMidYMax</option>
					<option value="xMaxYMin">xMaxYMin</option>
					<option value="xMaxYMid">xMaxYMid</option>
					<option value="xMaxYMax">xMaxYMax</option>
					<option value="xMinYMin">xMinYMin</option>
					<option value="xMinYMid">xMinYMid</option>
					<option value="xMinYMax">xMinYMax</option>
					<option value="xMidYMin">xMidYMin</option>
					<option value="xMidYMid" selected="selected">xMidYMid</option>
					<option value="xMidYMax">xMidYMax</option>
					<option value="xMaxYMin">xMaxYMin</option>
					<option value="xMaxYMid">xMaxYMid</option>
					<option value="xMaxYMax">xMaxYMax</option>
					<option value=""></option>
				</select>
				<div class="radios">
					<input type="radio" value="meet" name="meetOrSlice" id="meet"><label for="meet" style="margin-right: 1em;">meet</label>
					<input type="radio" value="slice" name="meetOrSlice" id="slice" checked="checked"><label for="slice">slice</label>
				</div>
			</fieldset>
			<input type="checkbox" id="guidelines-visibility"><label for="guidelines-visibility" style="display:inline-block; margin-left: .5em;">Show x &amp; y Guidelines</label>
		</div>
		<div class="svg-container column">
			<svg class="outer" width="800" height="600" viewBox="0 0 800 600">
				<g class="guidelines">
                    <path id="midlines" class="separator guideline" stroke-dasharray="2"></path>
                </g>
                <path class="separator ruler" d="M0,0v15M10,0v15M20,0v15M30,0v15M40,0v15M50,0v15M60,0v15M70,0v15M80,0v15M90,0v15M100,0v15M110,0v15M120,0v15M130,0v15M140,0v15M150,0v15M160,0v15M170,0v15M180,0v15M190,0v15M200,0v15M210,0v15M220,0v15M230,0v15M240,0v15M250,0v15M260,0v15M270,0v15M280,0v15M290,0v15M300,0v15M310,0v15M320,0v15M330,0v15M340,0v15M350,0v15M360,0v15M370,0v15M380,0v15M390,0v15M400,0v15M410,0v15M420,0v15M430,0v15M440,0v15M450,0v15M460,0v15M470,0v15M480,0v15M490,0v15M500,0v15M510,0v15M520,0v15M530,0v15M540,0v15M550,0v15M560,0v15M570,0v15M580,0v15M590,0v15M600,0v15M610,0v15M620,0v15M630,0v15M640,0v15M650,0v15M660,0v15M670,0v15M680,0v15M690,0v15M700,0v15M710,0v15M720,0v15M730,0v15M740,0v15M750,0v15M760,0v15M770,0v15M780,0v15M790,0v15M800,0v15M0,0v30M100,0v30M200,0v30M300,0v30M400,0v30M500,0v30M600,0v30M700,0v30M800,0v30M0,0h15M0,10h15M0,20h15M0,30h15M0,40h15M0,50h15M0,60h15M0,70h15M0,80h15M0,90h15M0,100h15M0,110h15M0,120h15M0,130h15M0,140h15M0,150h15M0,160h15M0,170h15M0,180h15M0,190h15M0,200h15M0,210h15M0,220h15M0,230h15M0,240h15M0,250h15M0,260h15M0,270h15M0,280h15M0,290h15M0,300h15M0,310h15M0,320h15M0,330h15M0,340h15M0,350h15M0,360h15M0,370h15M0,380h15M0,390h15M0,400h15M0,410h15M0,420h15M0,430h15M0,440h15M0,450h15M0,460h15M0,470h15M0,480h15M0,490h15M0,500h15M0,510h15M0,520h15M0,530h15M0,540h15M0,550h15M0,560h15M0,570h15M0,580h15M0,590h15M0,600h15M0,0h30M0,100h30M0,200h30M0,300h30M0,400h30M0,500h30M0,600h30"></path>
				<svg class="inner" width="800" height="600" viewBox="0 0 800 600" preserveAspectRatio="xMinYMin slice">
					<g id="parrot">
					  <path fill="#68A284" d="M98.595 272.797c-41.144 0-77.262-28.608-97.898-71.725 3.832 44.6 25.214 98.16 98.218 98.16 72.024 0 94.49-54.748 98.282-99.631C176.686 243.541 140.206 272.797 98.595 272.797z"></path>
					  <path fill="#5EEA99" d="M196.082 161.237c-20.703 42.64-56.618 70.872-97.487 70.872 -40.322 0-75.837-27.467-96.662-69.153C0.61 170.116 0 177.521 0 185.006c0 5.137 0.222 10.535 0.697 16.066 20.636 43.116 56.754 71.725 97.898 71.725 41.611 0 78.091-29.256 98.603-73.195 0.422-5.018 0.625-9.916 0.625-14.596C197.822 176.919 197.318 168.93 196.082 161.237z"></path>
					  <path fill="#B6382F" d="M98.915 94.931c-63.562 0-90.091 30.654-96.982 68.025 20.824 41.687 56.339 69.153 96.662 69.153 40.869 0 76.784-28.232 97.487-70.872C190.195 124.653 167.334 94.931 98.915 94.931z"></path>
					  <path fill="#B6382F" d="M118.635 0c0.559 3.308-0.557 11.669-8.582 20.761 -3.538 4.004-3.218 3.191-4.57 5.207 -1.356 2.023-3.029 3.832-5.068 5.396 -2.076 1.537-2.77 2.442-6.062 3.158 -0.569-3.316-0.999-3.953-1.232-8.067 -0.139-2.562 0.43-6.148 1.79-8.161 1.368-2.012 2.879-4.152 6.157-6.386C103.149 10.369 115.682 5.588 118.635 0z"></path>
					  <path fill="none" d="M95.193 185.62h-0.008c0.705 0.101 1.417 0.174 2.151 0.194C96.602 185.794 95.893 185.721 95.193 185.62z"></path>
					  <path fill="#B6382F" d="M42.493 82.895l-0.026-0.034c0 0 0.004 0.166 0.004 0.422 -0.117 1.52-0.226 3.046-0.226 4.599 0 0.471 0.045 0.934 0.057 1.407 -0.32 5.711-1.168 14.632-3.651 24.038 -1.752 6.597-4.295 13.434-8.063 19.572 -2.735 4.472-4.901 9.551-6.639 14.786 -6.816 20.509-6.842 43.583-6.842 43.583 1.07 44.281 37.275 109.358 81.81 109.358V185.713v-44.488V31.21C69.3 31.21 45.021 53.936 42.493 82.895zM95.185 185.62h0.008c0.7 0.101 1.409 0.174 2.144 0.194C96.602 185.794 95.89 185.721 95.185 185.62z"></path>
					  <path fill="#EA575B" d="M174.207 148.585c-1.775-5.548-4.021-10.947-6.907-15.687 -3.439-5.646-5.878-11.878-7.604-17.967 -2.954-10.397-3.847-20.393-4.137-26.365 0-0.23 0.026-0.458 0.026-0.686 0-1.032-0.102-2.044-0.155-3.063 -0.022-1.22-0.003-1.957-0.003-1.957l-0.087 0.128c-2.49-29.01-26.777-51.778-56.426-51.778v110.015 44.488 114.913c44.572 0 80.796-65.137 81.806-109.459C180.721 191.167 180.698 168.835 174.207 148.585z"></path>
					  <path fill="#CABA9F" d="M80.822 78.55c-2.656 4.653-5.429 12.289-2.901 16.539l16.07 26.983c1.266 2.134 2.935 3.199 4.604 3.199V60.084C93.127 60.084 82.571 75.489 80.822 78.55z"></path>
					  <path fill="#DDD2C0" d="M103.195 122.072l16.069-26.983c2.535-4.25 0.279-10.875-2.9-16.539 -1.323-2.356-13.207-18.466-17.77-18.466v65.186C100.26 125.271 101.933 124.206 103.195 122.072z"></path>
					  <path fill="#07171B" d="M56.912 70.246c0 5.746 2.878 10.404 6.436 10.404 3.553 0 6.431-4.659 6.431-10.404 0-5.748-2.878-10.403-6.431-10.403C59.791 59.843 56.912 64.499 56.912 70.246z"></path>
					  <path fill="#FFFFFF" d="M63.807 66.213c0 1.541-1.255 2.794-2.795 2.794 -1.545 0-2.796-1.253-2.796-2.794 0-1.544 1.251-2.794 2.796-2.794C62.552 63.419 63.807 64.668 63.807 66.213z"></path>
					  <ellipse fill="#07171B" cx="134.481" cy="70.246" rx="6.433" ry="10.404"></ellipse>
					  <circle fill="#FFFFFF" cx="132.145" cy="66.213" r="2.794"></circle>
					  <path fill="#CABA9F" d="M66.542 294.861c0 3.184-2.581 5.765-5.765 5.765l0 0c-3.188 0-5.769-2.581-5.769-5.765v-10.41c0-3.184 2.581-5.764 5.769-5.764l0 0c3.184 0 5.765 2.58 5.765 5.764V294.861z"></path>
					  <path fill="#CABA9F" d="M78.083 294.861c0 3.184-2.584 5.765-5.769 5.765l0 0c-3.187 0-5.772-2.581-5.772-5.765v-10.41c0-3.184 2.585-5.764 5.772-5.764l0 0c3.184 0 5.769 2.58 5.769 5.764V294.861z"></path>
					  <path fill="#CABA9F" d="M89.62 294.861c0 3.184-2.581 5.765-5.769 5.765l0 0c-3.188 0-5.769-2.581-5.769-5.765v-10.41c0-3.184 2.581-5.764 5.769-5.764l0 0c3.188 0 5.769 2.58 5.769 5.764V294.861z"></path>
					  <path fill="#DDD2C0" d="M119.743 294.861c0 3.184-2.581 5.765-5.769 5.765l0 0c-3.188 0-5.769-2.581-5.769-5.765v-10.41c0-3.184 2.581-5.764 5.769-5.764l0 0c3.188 0 5.769 2.58 5.769 5.764V294.861z"></path>
					  <path fill="#DDD2C0" d="M131.28 294.861c0 3.184-2.581 5.765-5.765 5.765l0 0c-3.191 0-5.772-2.581-5.772-5.765v-10.41c0-3.184 2.581-5.764 5.772-5.764l0 0c3.184 0 5.765 2.58 5.765 5.764V294.861z"></path>
					  <path fill="#DDD2C0" d="M142.821 294.861c0 3.184-2.585 5.765-5.773 5.765l0 0c-3.183 0-5.768-2.581-5.768-5.765v-10.41c0-3.184 2.585-5.764 5.768-5.764l0 0c3.188 0 5.773 2.58 5.773 5.764V294.861z"></path>
					  <path fill="#EA575B" d="M125.907 10.497c0.565 3.304-3.541 15.808-7.905 20.605 -1.729 1.899-10.165 10.726-18.8 12.396 -0.569-3.319-1.255-8.693-0.607-11.196 0.682-2.471 2.551-6.471 9.201-9.417C117.434 18.62 121.515 16.084 125.907 10.497z"></path>
					</g>
					
					
					<g>
					<circle fill="red" cx="232.145" cy="66.213" r="20"></circle>
					</g>
                    <g class="guidelines">
                        <path id="minx" stroke="orange" stroke-width="5" class="guideline"></path>
                        <path id="midmaxx" stroke="orange" stroke-dasharray="1" stroke-width="2" class="guideline"></path>
                        <path id="miny" stroke="#9b59b6" stroke-width="5" class="guideline"></path>
                        <path id="midmaxy" stroke="#9b59b6" stroke-dasharray="1" stroke-width="2" class="guideline"></path>
                    </g>
                    <path class="separator ruler" d="M0,0v15M10,0v15M20,0v15M30,0v15M40,0v15M50,0v15M60,0v15M70,0v15M80,0v15M90,0v15M100,0v15M110,0v15M120,0v15M130,0v15M140,0v15M150,0v15M160,0v15M170,0v15M180,0v15M190,0v15M200,0v15M210,0v15M220,0v15M230,0v15M240,0v15M250,0v15M260,0v15M270,0v15M280,0v15M290,0v15M300,0v15M310,0v15M320,0v15M330,0v15M340,0v15M350,0v15M360,0v15M370,0v15M380,0v15M0,0v30M100,0v30M200,0v30M300,0v30M0,0h15M0,10h15M0,20h15M0,30h15M0,40h15M0,50h15M0,60h15M0,70h15M0,80h15M0,90h15M0,100h15M0,110h15M0,120h15M0,130h15M0,140h15M0,150h15M0,160h15M0,170h15M0,180h15M0,190h15M0,200h15M0,210h15M0,220h15M0,230h15M0,240h15M0,250h15M0,260h15M0,270h15M0,280h15M0,290h15M0,300h15M0,310h15M0,320h15M0,330h15M0,340h15M0,350h15M0,0h30M0,100h30M0,200h30M0,300h30"></path>
				<g class="labels" font-size="16px"><text x="-15" y="43">0</text><text x="85" y="43">100</text><text x="185" y="43">200</text><text x="285" y="43">300</text><text x="30" y="5">0</text><text x="30" y="105">100</text><text x="30" y="205">200</text><text x="30" y="305">300</text></g></svg>
			<g class="labels" font-size="16px"><text x="-15" y="43">0</text><text x="85" y="43">100</text><text x="185" y="43">200</text><text x="285" y="43">300</text><text x="385" y="43">400</text><text x="485" y="43">500</text><text x="585" y="43">600</text><text x="685" y="43">700</text><text x="785" y="43">800</text><text x="30" y="5">0</text><text x="30" y="105">100</text><text x="30" y="205">200</text><text x="30" y="305">300</text><text x="30" y="405">400</text><text x="30" y="505">500</text><text x="30" y="605">600</text></g></svg>
		</div>
		<aside class="sidebar column">

			<!-- <button class="guide-trigger">Guide</button> -->
			<!--<script type="text/javascript" src="http://cdn.adpacks.com/adpacks.js?legacyid=1287837&zoneid=1386&key=13ef3eaa0a08baab445eed65885ebad2&serve=C6SI42Y&placement=wwwsarasoueidancom&circle=dev" id="_adpacks_js"></script>-->
		</aside>
		
	</div><!-- end wrapper -->
	

	<script type="text/javascript" async="" src="svg/ga.js"></script><script src="svg/script.js"></script>
	<script async="" type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-37248572-1']);
        _gaq.push(['_setDomainName', 'sarasoueidan.com']);
        _gaq.push(['_trackPageview']);
        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
		
		
		
    </script>  

		
</body></html>